<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :lock-scroll="true"
    :close-on-click-modal="true"
    :close-on-press-escape="true"
    width="480px"
    :append-to-body="true"
    class="buy-dialog"
    :modal-append-to-body="true" style="font-size: 0.8rem;"
  >
    <el-row v-if="value!=null">
      <el-row class="sell-good">
        <div class="good" style="margin: 0;border: 0">
          <div class="good-img">
            <img :src="value|goodImg"/>
            <div class="good-name">{{value.good.name}}</div>
          </div>
          <div class="sell-info">
            <div class="sell-info-inf">
              <div>
                <span class="label">品牌:</span><span>{{value.brand.name}}</span>
              </div>
              <div>
                <span class="label">编码:</span><span>{{value.itemNo}}</span>
              </div>
              <div>
                <span class="label">分类:</span><span>{{value.category.namePath}}</span>
              </div>
              <div v-for="spec in specDatas(value)" :key="spec.id">
                <span class="label">{{spec.name}}:</span><span>{{spec.value}}</span>
              </div>
              <div>
                <span class="label">原价:</span><span class="red">￥{{value.sellPrice}}</span>
              </div>
              <div>
                <span class="label">已售:</span><span class="red">{{value.sellNum}}</span>
                <span class="label">库存:</span><span class="red">{{value.arrivalNum-value.sellNum}}</span>
              </div>

              <div>
                <span class="label" style="color: red;font-weight: 600;font-size: 120%">现价:</span><span class="red"
                                                                                                        style="font-size: 120%;font-weight: 600">￥{{value.price}}</span>
              </div>
            </div>
          </div>
        </div>
      </el-row>
      <el-row>
        <span><span class="red">*</span> 购买数量:</span>
        <el-input-number v-model="buyNum" :min="1" :max="value.arrivalNum-value.sellNum"></el-input-number>
        <span class="red" style="padding: 0px 5px;font-size: 120%;font-weight: 800;">总价: ￥{{allPrice}}</span>
      </el-row>
      <el-row>
        <span class="red" style="padding: 0px 20px;">输入的数字请不要超过库存数量</span>
      </el-row>
    </el-row>
    <div v-if="value!=null" slot="footer">
      <el-button type="primary" @click="doBuy" :loading="loading"><i class="fa  fa-shopping-cart"/> 确认购买</el-button>
      <el-button type="danger" @click="closed"><i class="fa  fa-sign-out"/> 关闭</el-button>
    </div>
  </el-dialog>

</template>

<script>
  import Dialog from 'src/components/common/js/dialog-mix'
  import FrontService from 'src/service/front'

  export default {
    name: 'HBuyDialog',
    mixins: [Dialog],
    data() {
      return {
        datas: [],
        loading: false,
        buyNum: 1
      }
    }, filters: {
      goodImg: function (data) {
        if (data != null && data.imgs != null && data.imgs.length > 0) {
          return data.imgs[0] + '?x-oss-process=style/small'
        } else {
          return '#'
        }
      }
    },
    computed: {
      allPrice: function () {
        return (this.value.price * this.buyNum).toFixed(2)
      }
    },
    watch: {
      value: function (c, d) {
        if (c != null) {
          this.datas.push(c)
        } else {
          this.datas = []
        }
        this.buyNum = 1
        this.loading = false
      }
    },
    props: {
      value: {
        type: Object,
        default: function () {
          return {}
        }
      }
    },
    methods: {
      specDatas: function (data) {
        if (data != null) {
          if (data.specs != undefined && data.specs != null) {
            if (data.specs.datas != null) {
              return data.specs.datas
            }
          }
        }
        return []
      },
      doBuy: function () {
        const me = this
        me.loading = true
        const params = {
          purchaseDetailId: this.value.id,
          type: 2,
          bugInfos: [{userId: 1, num: this.buyNum}]
        }
        FrontService.orderCreate(params).then(ds => {
          if (ds != null) {
            const data = ds.datas[0]
            me.value.arrivalNum = data.arrivalNum
            me.value.sellNum = data.sellNum
            me.$message.success('购买商品[' + me.value.good.name + ']成功。请到购买列表查看。')
            me.closed()
          }
          me.loading = false
          me.buyNum = 1
        })
      }
    }
  }
</script>
